﻿<UserControl x:Class="DemoTransformBox.UI.PointSelector"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:vsm="clr-namespace:System.Windows;assembly=PresentationFramework">

    <UserControl.Resources>
        <Style x:Key="CenterRectangle" TargetType="Rectangle">
            <Setter Property="StrokeThickness" Value="1"/>
            <Setter Property="Stroke" Value="#000000"/>
        </Style>

        <Style x:Key="PointStyle" TargetType="Rectangle">
            <Setter Property="Width" Value="12"/>
            <Setter Property="Height" Value="12"/>
            <Setter Property="StrokeThickness" Value="1"/>
            <Setter Property="Stroke" Value="#000000"/>
            <Setter Property="Fill" Value="#FFFFFFFF"/>
        </Style>
    </UserControl.Resources>

    <Grid>
        <vsm:VisualStateManager.VisualStateGroups>
            <vsm:VisualStateGroup x:Name="VisibilityTransformBox">
                <vsm:VisualState x:Name="SelectedNaN" />
                <vsm:VisualState x:Name="SelectedA">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="SelectPoint" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0" Storyboard.TargetName="SelectPoint" Storyboard.TargetProperty="(Canvas.Left)" To="0"/>
                        <DoubleAnimation Duration="0" Storyboard.TargetName="SelectPoint" Storyboard.TargetProperty="(Canvas.Top)" To="0"/>
                    </Storyboard>
                </vsm:VisualState>

                <vsm:VisualState x:Name="SelectedB">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="SelectPoint" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0" Storyboard.TargetName="SelectPoint" Storyboard.TargetProperty="(Canvas.Left)" To="20"/>
                        <DoubleAnimation Duration="0" Storyboard.TargetName="SelectPoint" Storyboard.TargetProperty="(Canvas.Top)" To="0"/>
                    </Storyboard>
                </vsm:VisualState>

                <vsm:VisualState x:Name="SelectedC">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="SelectPoint" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0" Storyboard.TargetName="SelectPoint" Storyboard.TargetProperty="(Canvas.Left)" To="40"/>
                        <DoubleAnimation Duration="0" Storyboard.TargetName="SelectPoint" Storyboard.TargetProperty="(Canvas.Top)" To="0"/>
                    </Storyboard>
                </vsm:VisualState>

                <vsm:VisualState x:Name="SelectedD">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="SelectPoint" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0" Storyboard.TargetName="SelectPoint" Storyboard.TargetProperty="(Canvas.Left)" To="40"/>
                        <DoubleAnimation Duration="0" Storyboard.TargetName="SelectPoint" Storyboard.TargetProperty="(Canvas.Top)" To="20"/>
                    </Storyboard>
                </vsm:VisualState>

                <vsm:VisualState x:Name="SelectedE">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="SelectPoint" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0" Storyboard.TargetName="SelectPoint" Storyboard.TargetProperty="(Canvas.Left)" To="40"/>
                        <DoubleAnimation Duration="0" Storyboard.TargetName="SelectPoint" Storyboard.TargetProperty="(Canvas.Top)" To="40"/>
                    </Storyboard>
                </vsm:VisualState>

                <vsm:VisualState x:Name="SelectedF">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="SelectPoint" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0" Storyboard.TargetName="SelectPoint" Storyboard.TargetProperty="(Canvas.Left)" To="20"/>
                        <DoubleAnimation Duration="0" Storyboard.TargetName="SelectPoint" Storyboard.TargetProperty="(Canvas.Top)" To="40"/>
                    </Storyboard>
                </vsm:VisualState>

                <vsm:VisualState x:Name="SelectedG">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="SelectPoint" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0" Storyboard.TargetName="SelectPoint" Storyboard.TargetProperty="(Canvas.Left)" To="0"/>
                        <DoubleAnimation Duration="0" Storyboard.TargetName="SelectPoint" Storyboard.TargetProperty="(Canvas.Top)" To="40"/>
                    </Storyboard>
                </vsm:VisualState>

                <vsm:VisualState x:Name="SelectedH">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="SelectPoint" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0" Storyboard.TargetName="SelectPoint" Storyboard.TargetProperty="(Canvas.Left)" To="0"/>
                        <DoubleAnimation Duration="0" Storyboard.TargetName="SelectPoint" Storyboard.TargetProperty="(Canvas.Top)" To="20"/>
                    </Storyboard>
                </vsm:VisualState>

                <vsm:VisualState x:Name="SelectedCentralPoint">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="SelectPoint" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0" Storyboard.TargetName="SelectPoint" Storyboard.TargetProperty="(Canvas.Left)" To="20"/>
                        <DoubleAnimation Duration="0" Storyboard.TargetName="SelectPoint" Storyboard.TargetProperty="(Canvas.Top)" To="20"/>
                    </Storyboard>
                </vsm:VisualState>

            </vsm:VisualStateGroup>
        </vsm:VisualStateManager.VisualStateGroups>

        <Canvas Name="Root" Width="50" Height="50">

            <Rectangle  Canvas.Left="5" Canvas.Top="5" Width="40" Height="40" Style="{StaticResource CenterRectangle}"/>

            <Rectangle x:Name="A" Canvas.Left="0" Canvas.Top="0" Style="{StaticResource PointStyle}"/>
            <Rectangle x:Name="B" Canvas.Left="20" Canvas.Top="0" Style="{StaticResource PointStyle}"/>
            <Rectangle x:Name="C" Canvas.Left="40" Canvas.Top="0" Style="{StaticResource PointStyle}"/>
            <Rectangle x:Name="D" Canvas.Left="40" Canvas.Top="20" Style="{StaticResource PointStyle}"/>
            <Rectangle x:Name="E" Canvas.Left="40" Canvas.Top="40" Style="{StaticResource PointStyle}"/>
            <Rectangle x:Name="F" Canvas.Left="20" Canvas.Top="40" Style="{StaticResource PointStyle}"/>
            <Rectangle x:Name="G" Canvas.Left="0" Canvas.Top="40" Style="{StaticResource PointStyle}"/>
            <Rectangle x:Name="H" Canvas.Left="0" Canvas.Top="20" Style="{StaticResource PointStyle}"/>
            <Rectangle x:Name="CentralPoint" Canvas.Left="20" Canvas.Top="20" Style="{StaticResource PointStyle}"/>

            <Rectangle x:Name="SelectPoint" Canvas.Left="20" Canvas.Top="20" Style="{StaticResource PointStyle}" Fill="#000000" Visibility="Collapsed"/>
        </Canvas>
    </Grid>
</UserControl>

